<template>
    <div>搜索结果页面</div>
  
    <!-- 商品列表 -->
    <!-- 商品列表 -->
    <!-- 设置垂直间距 -->
    <van-row :gutter="[20, 20]" class="list">
      <!-- 使用组件 -->
      <ProductItem
        v-for="item in listArr"
        :key="item.id"
        :item="item"
        @click="$router.push('/detail?id=' + item.proid)"
      >
      </ProductItem>
    </van-row>
  </template>
  <script>
  // 引入组件-注册苏州
  import ProductItem from "@/components/ProductItem.vue";
  
  import { productSearch } from "@/api/product";
  
  export default {
    components: { ProductItem },
    data() {
      return {
        listArr: [],
      };
    },
    methods: {},
    async mounted() {
      //获取搜索的字符串--》发起搜索请求
      console.log(this.$route.query.word);
  
      let keyword = this.$route.query.word;
      //这里不要关系 地址和参数名
      let r = await productSearch(keyword);
  
      console.log(r.data);
      //保存搜索结果数组
      this.listArr = r.data.data;
    },
  };
  </script>
  <style lang="css" scoped>
  .list {
    width: 355px;
    margin: 0 auto;
  }
  </style>
  